<template>
  <div class="sidebar">
    <div class="app">
      <el-menu default-active="1" class="el-menu-vertical-demo" :unique-opened="true">
        <el-submenu v-for="(item) in allApp" :key="item.name" :index="item.name">
          <template slot="title">
            <span :class="`iconfont ${item.icon}`"></span>
            <span slot="title">{{item.name}}</span>
          </template>
          <el-menu-item v-for="(func) in item.childrenMenuList" :key="func.name" :index="func.name"
                        @click="openUrl(func)">{{func.name}}</el-menu-item>
        </el-submenu>
      </el-menu>
      <div style="height:0px;border-top:1px solid #3182DD"></div>
    </div>

    <el-dialog :visible.sync="dialogVisibleTechDoc" width="60%"  top="7vh"  class="techDoc_dialog" :destroy-on-close="true"  :close-on-click-modal="false">
      <span slot="title">
        <doc-header :title="title" />
      </span>
      <p-version  v-show="source === 2"></p-version>
      <p-role-group v-show="source === 3"></p-role-group>
      <p-dict v-show="source === 4"></p-dict>
    </el-dialog>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import DocHeader from '@/components/header/DocHeader.vue'
import pVersion from '@/views/history/ConfigHistorySearch.vue'
import pRoleGroup from '@/views/role/roleGroup.vue'
import pDict from '@/views/dict/dict.vue'
export default {
  components: {
    DocHeader,
    pVersion,
    pRoleGroup,
    pDict
  },
  data () {
    return {
      split: 0.5,
      num: 1,
      items: [{
        icon: 'el-icon-lx-home',
        index: 'home',
        title: 'home'
      },
      {
        icon: 'el-icon-lx-home',
        index: 'about',
        title: 'about'
      },
      {
        icon: 'el-icon-lx-calendar',
        index: '3',
        title: '表单相关',
        subs: [{
          index: 'form',
          title: '基本表单'
        },

        {
          index: 'upload',
          title: '文件上传'
        }
        ]
      },
      {
        icon: 'el-icon-lx-warn',
        index: '7',
        title: '错误处理',
        subs: [{
          index: 'permission',
          title: '权限测试'
        },
        {
          index: '404',
          title: '404页面'
        }
        ]
      },
      {
        icon: 'el-icon-lx-redpacket_fill',
        index: '/donate',
        title: '支持作者'
      }
      ],
      dialogVisible: false,
      dialogVisibleTechDoc: false,
      techDocUrl: null,
      title: null,
      source: null,
      isDialog: null
    }
  },
  props: [],
  computed: {
    onRoutes () {
      return this.$route.path.replace('/', '')
    },
    ...mapState(['collapse']),
    ...mapState('Sidebar', ['allApp']),
    ...mapState('User', ['user'])
  },
  created () {
    this.getUser()
  },
  updated () {
    this.setUlMarginTop()
  },
  methods: {
    setUlMarginTop () {
      var myContainerAllApp = document.querySelectorAll('.myContainerAllApp')
      myContainerAllApp.forEach((el, key) => {
        el.onmouseover = null
        el.onmouseover = function () {
          var myUlAllApp = document.querySelectorAll('.myUlAllApp')[key]
          var marginTop = -myUlAllApp.scrollHeight * 0.5 + 'px'
          myUlAllApp.style.marginTop = marginTop
        }
      })
    },
    ...mapActions({
      getUser: 'api/role/user/info'
    }),
    openUrl ({
      url,
      name
    }) {
      this.source = null
      this.title = name
      switch (name) {
        case '新增配置':
          this.techDocUrl = url
          this.dialogVisible = false
          this.dialogVisibleTechDoc = true
          this.source = 1
          return
        case '历史版本':
          this.techDocUrl = url
          this.dialogVisible = false
          this.dialogVisibleTechDoc = true
          this.source = 2
          this.isDialog = true
          return
        case '用户权限组管理':
          this.techDocUrl = url
          this.dialogVisible = false
          this.dialogVisibleTechDoc = true
          this.source = 3
          this.isDialog = true
          return
        case '字典管理':
          this.techDocUrl = url
          this.dialogVisible = false
          this.dialogVisibleTechDoc = true
          this.source = 4
          this.isDialog = true
          return
        // case 'C919飞机定义视图查询(新)':
        //   this.dialogVisible = false
        //   this.$router.push('/home/define')
        //   return
        // case 'C919飞机设计视图查询(新)':
        //   this.dialogVisible = false
        //   this.$router.push('/home/design')
        //   return
        // case 'C919飞机试验视图查询(新)':
        //   this.dialogVisible = false
        //   this.$router.push('/home/test')
        //   return
        // case 'C919飞机系统视图查询(新)':
        //   this.dialogVisible = false
        //   this.$router.push('/home/system')
        //   return
        // case 'C919飞机选配视图查询(新)':
        //   this.dialogVisible = false
        //   this.$router.push('/home/option')
        //   return
          // case "xxxxx"
      }
      if (url.indexOf && url.indexOf('http') === 0) {
        window.open(url)
      } else {
        window.open(`http://pdm.ideal.com/Windchill${url}`)
      }
    },

    changeTitle (title) {
      this.docTitle = title
    },
    closeEdit (val) {
      this.dialogVisibleTechDoc = val
    }
  }
}
</script>

<style scoped lang="less">
  .sidebar {
    flex-shrink: 0;
    display: block;
    // position: absolute;
    width: 250px;
    //   overflow-x:hidden ;
    left: 0;
    top: 64px;
    bottom: 0;

    // overflow-y: scroll;
    .avatar {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 0;
      // background: #3182dd;
      background: url("../assets/bgi.png") no-repeat;
      background-size: cover;
      color: #ffffff;
      border-top: 1px solid #5f82a9;

      .iconUser {
        width: 68px;
        height: 68px;
      }

      .name {
        margin-top: 5px;
      }
    }

    .app {
      max-height: 870px;
      overflow: auto;

      .iconfont {
        margin-right: 10px;
      }
    }
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
  }

  .sidebar>ul {
    height: 100%;
  }

  .dialog {
    .myContent {
      .myContainer {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #666d76;
        cursor: pointer;

        &:hover {
          background: #3182dd;

          .iconfont {
            color: #ffffff;
          }

          .title {
            color: #ffffff;
          }
        }

        .jiaIconfont {
          position: absolute;
          width: 32px;
          height: 32px;
          left: 50px;
          top: -14px;
        }

        &:hover ul {
          display: block;
        }

        span:nth-child(1) {
          font-size: 24px;
          margin-bottom: 5px;
        }

        span:nth-child(2) {
          font-size: 14px;
        }

        ul {
          display: none;
          position: absolute;
          left: 170px;
          // 必须要加top0,不然ie会默认定位在底部位置
          top: 50%;
          background: rgba(255, 255, 255, 1);
          padding: 4px 0;
          z-index: 1;
          width: 240px;
          border-radius: 6px;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.22);

          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 10px;

            &:hover {
              background: #e6f2ff;
            }

            .dot {
              flex-grow: 0;
            }

            .addContainer {
              flex-grow: 1;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 5px;

              &:hover {
                .name {
                  color: #3182dd;
                }

                .iconfont {
                  color: #3182dd !important;
                }
              }

              .name {
                color: #666d76;
              }

              .add {
                font-size: 14px;
                // width: 85px;
                flex-shrink: 0;

                .iconfont {
                  color: #aaaaaa;
                }

                span {
                  font-size: 1em;
                }

                span:nth-child(1) {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }

  /deep/.el-submenu__title {
    // background: #304156;
    background: url("../assets/barback.gif") no-repeat;
    background-size: cover;
    color: #bfcbd9;
    color: #ffffff;
    height: 40px;
  }

  /deep/.el-submenu .el-menu-item {
    // background: #1f2d3d;
    // color: #bfcbd9;

    padding: 0;
    padding-left: 25px !important;
    margin: 0 10px;
    border-bottom: 1px solid #49a7bf;
  }
</style>
